<template>
	<!-- 轮播图区域 -->
	<div>
		<swipper :lunboList="lunboList" :isfull="true"></swipper>
		<!-- 九宫格区域 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/news">
                  	<img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodsList">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                   	<img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">留言反馈</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                   	<img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">视频专区</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/">
                   	<img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">联系我们</div></router-link></li>
          
		        </ul>
	</div>
	
</template>
<script>
import swipper from '../subComponents/swipper.vue'
import { Toast } from 'mint-ui';
	export default{
// 获取数据的接口： http://www.liulongbin.top:3005/api/getlunbo
// 获取轮播图的数据
// 1.this.$http.get().then()
// 2.如果获取成功，把数据存在data里
	// 2.1利用v-for把数据添加到页面上
// 3.如果获取失败，就用totast提示获取数据失败
	data:function(){ return{lunboList:[]}},
	created:function(){this.getlunbo();},
	methods:{
		getlunbo:function(){
			this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(result=>{
				// console.log(result.body);
				if(result.body.status==0)
				{
					this.lunboList = result.body.message;

				}
			else{
				Toast('数据加载失败');
			}
			});
		}
	},
	components:{
		swipper:swipper
	}

	}
	
</script>
<style scoped lang="scss">
	div{
		margin: 0px;
		padding: 0px;
		width: 100%;
	}

	
	.mui-grid-view.mui-grid-9{
		background-color: white;
		li{
			border: none;
		 img{
		 	width: 60px;
		height: 60px;
		}
		.mui-media-body{
			font-size: 12px;
		}
		
	}
	}
	

</style>